.map-wrapper {
    width: 100%;
    height: calc(~"100vh");
    position: relative;
}

.side-menu-wrapper {
    position: absolute;
    top: 180px;
    left: 0;
    z-index: 9;
    max-height: 300px;
    overflow-y: auto;
}

.button-group {
    position: absolute;
    top: 50%;
    right: 48px;
}

.button-group-item {
    margin: 8px 0;
}

.left-menu {
    position: relative;
    opacity: 0.8;

    ul {
        width: 78px;
        padding: 0;
        position: absolute;
        left: -78px;
        top: -30px;
        list-style: none;
        border: 1px solid #ccc;
        background-color: #fff;

        li {
            height: 24px;
            line-height: 24px;
            border-bottom: 1px solid #ccc;
            text-indent: 12px;
            transition: color .3s;
            cursor: pointer;

            &:hover {
                color: #1890FF
            }
        }
    }
}

.switch {
    float: right;
    margin-right: 8px;
}

.icon-wrapper {
    padding: 7px;
    background-color: #fff;
    width: 38px;
    height: 38px;
}

.icon {
    margin: auto;
    font-size: 24px;
}

.map {
    width: 100%;
    height: calc(~"100vh");
}

.front-map-overlay {
    width: 100%;
    height: calc(~"100vh - 136px");
    overflow-y: hidden;
    background-color: #fff;
}

.map-layer-search {
    position: absolute;
    top: 36px;
    left: 100px;
}

.location-search {
    position: absolute;
    top: 36px;
    right: 200px;
}

.map-legend {
    position: absolute;
    bottom: 24px;
    left: 24px;
    min-height: 280px;
    max-height: 400px;
    min-width: 280px;
    max-width: 400px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px;
    overflow-y: auto;
    border: 1px solid #ccc;
}

.map-legend-button {
    position: absolute;
    bottom: 40px;
    left: 40px;
}
